import { useIntersectionObserver } from '@vueuse/core'
// 图片懒加载指令
export const lazyload = {
    // 指令钩子，mounted 指令表示所在DOM元素插入到真实DOM上自动触发一次
    mounted(el, binding) {
        // el:指令所在DOM元素 -> img
        // binding.value:指令绑定的表达式的值 -> 图片的网络路径
        // isIntersecting 一个类型为布尔值的数据 当被监听元素进入视口区域时为true,离开视口区域时为false
        // 特别注意: 对于目标target是否进入视口区域的监听会一直进行不会只监听一次
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
            if (isIntersecting) {
                // 说明图片在可视区
                // 这时候再去加载对应图片
                el.src = binding.value
                stop()// 停止监视
            }
        })
    }
}